<template>
	<view>
		<view class="logo u-text-center" @click="getShowtx">
			<u-avatar class="logo-img" :src="login ? userinfo.avatarUrl :avatarUrl" size="large"></u-avatar>
			<view class="logo-title">
				<text class="uer-name">你好，{{login ? userinfo.nickName : '您未登录'}}</text>
			</view>
		</view>

		<view class="center-list">
			<navigator url="suggest" hover-class="navigator-hover">
				<view class="center-list-item">
					<u-icon name="question-circle" color="#19be6b " size="35"></u-icon>
					<text class="u-m-l-35 list-text">建议</text>
				</view>
				<u-line color="#18b566 " border-style="solid"></u-line>
			</navigator>
			<navigator url="approval" hover-class="navigator-hover">
				<view class="center-list-item badge">
					<u-icon name="chat-fill" color="#19be6b " size="35"></u-icon>
					<text class="u-m-l-35 list-text">审批</text>
					<u-badge size="mini" type="error" :count="approvalCount"></u-badge>
				</view>
			</navigator>
			<u-line color="#18b566 " border-style="solid"></u-line>
			<view class="center-list-item badge u-flex">
				<u-icon name="server-man" color="#19be6b " size="35"></u-icon>
				<view class="u-m-l-4"><button class="list-text" open-type="contact">客服</button></view>
			</view>
			<u-line color="#18b566 " border-style="solid"></u-line>
			<view class="center-list-item" @click="logOff()">
				<u-icon name="lock" color="#19be6b " size="35"></u-icon>
				<text class="u-m-l-35 list-text">注销</text>
			</view>
			<u-line color="#18b566 " border-style="solid"></u-line>
		</view>
		<u-popup v-model="showPopup" mode="center" border-radius="20" :closeable="true" width="80%">
			<view class="u-p-t-50 u-p-b-50 u-p-l-30 u-p-r-30">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<view class="u-m-l-40 u-m-r-40">
						<view class="u-flex u-row-center">
							<u-avatar :src="avatarUrl" size="large"></u-avatar>
						</view>
						<view class="u-flex u-row-center">
							<u-icon name="play-right-fill" size="18" label-size="24" top="1rpx" label="点击选择图片"
								label-pos="left"></u-icon>
						</view>
					</view>
				</button>
				<view class="u-p-10 u-m-t-40 u-bg u-flex u-row-between u-col-center u-shadow u-b-r-20">
					<view class="u-font-bold-500 u-flex-1 u-content-color u-font-md u-text-center">
						获取昵称：
					</view>
					<view class="u-flex-2">
						<input type="nickname" placeholder="请输入内容" @blur="blurname" v-model="nickName" />
					</view>
				</view>
				<view class="u-m-t-30">
					<u-button :loading="isLoad" @click="conserved" type="success"
						:custom-style="{'border-radius':'20rpx'}" throttle-time="500" hover-class="none">设 置</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				login: false,
				avatarUrl: "https://account-book-cos.1900shop.online/static/images/user-index/avatar.png",
				nickName: '',
				userinfo: {},
				showPopup: false,
				approvalCount: 0
			}
		},
		onLoad() {
			_this = this;
			_this.userinfo = _this.os_user;
			if (_this.userinfo) {
				_this.login = true;
			} else {
				_this.goTabbarUrl('/pages/user/login')
			}
			_this.nickName = _this.userinfo.nickName;
			_this.avatarUrl = _this.userinfo.avatarUrl;
		},
		onShow() {
			_this.approvalCount = 0
			_this.auditCount()
		},
		methods: {
			// 获取昵称
			blurname(e) {
				_this.nickName = e.detail.value
			},
			//打开弹出页面
			getShowtx() {
				this.showPopup = true
			},
			onChooseAvatar(e) {
				console.log("头像信息：" + e.detail.avatarUrl)
				uni.uploadFile({
					url: 'https://account-book-front.1900shop.online/api/file/upload',
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {
						type: 2
					},
					success: (response) => {
						const res = JSON.parse(response.data);
						if (res.status == 200) {
							_this.avatarUrl = res.message;
							_this.$u.toast('上传成功')
						} else {
							_this.$u.toast('文件上传失败')
						}
					},
					fail() {
						_this.$u.toast('文件上传失败')
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			// 修改头像和昵称
			async conserved() {
				await _this.$u.api.updateUserInfo({
					id: _this.userinfo.id,
					openId: _this.userinfo.openId,
					avatarUrl: _this.avatarUrl,
					nickName: _this.nickName
				}).then(res => {
					_this.$u.vuex('os_user', res);
					_this.showPopup = false
					_this.$u.toast('提交成功')
					_this.goTabbarUrl('/pages/user/index')
				});
			},
			//注销
			logOff() {
				_this.$u.vuex('os_token', '');
				_this.$u.vuex('os_user', '');
				_this.goTabbarUrl('/pages/user/login')
			},
			//获取待审核的数量
			async auditCount() {
				await _this.$u.api.auditCount().then(res => {
					console.log("auditCount" + JSON.stringify(res))
					if (res) {
						_this.approvalCount = res
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//跳转到页面关闭其他页面
			goTabbarUrl(path) {
				uni.reLaunch({
					url: path
				});
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page {
		background-color: #f4f5f6;
	}

	button {
		border: none;
		outline: none;
		border-style: none;
		background-color: #FFFFFF;
		color: #000000;
		box-shadow: none;
	}

	button:after {
		border: none;
		border-style: none;
	}

	.avatar-wrapper {
		background-color: #FFFFFF;
		height: 100px;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #2fc25b;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 100upx;
		height: 100upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 50upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}


	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.badge {
		position: relative;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #2fc25b;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 35upx;
		color: #555;
		flex: 1;
		text-align: left;
	}
</style>